<template>
  <div class="orderList">
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="line-height: 0; text-align: left;">
      <!-- 搜索框 -->
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="6">
          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="searchText"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="orderList" border style="width: 100%">
        <el-table-column label="日期">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <template slot-scope="scope">
            <!-- {{ scope.row.pay_status === 1 ? '已付款' : '未付款' }} -->
            <el-button type="primary" :type="scope.row.pay_status === 1 ? 'primary' : 'danger'">
              {{ scope.row.pay_status === 1 ? '已付款' : '未付款' }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货">
        </el-table-column>
        <el-table-column prop="update_time" label="下单时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 点击事件 -->
            <el-button type="primary" size="mini" @click="orderEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 40px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- 编辑弹出框 -->
    <el-dialog title="修改地址" :visible.sync="dialogVisible" width="30%" center style="line-height: 0;">
      <span slot="footer" class="dialog-footer">
        <div class="block">
          <span class="demonstration">省市区/县</span>
          <el-cascader></el-cascader>
        </div>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      baseURL: 'http://43.138.15.137:7000/api/private/v1',
      token: localStorage.getItem('token'),
      orderList: [],
      pageNum: 1,
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      searchText: '',
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const res = await axios.get(this.baseURL + '/orders', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.pageNum
        },
        headers: {
          'Authorization': this.token
        }
      })
      try {
        console.log(res);
        let { data, meta } = res.data
        this.orderList = data.goods
        this.total = data.total
        console.log(this.orderList);

      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getOrderList()
    },
    orderEdit(row) {
      this.dialogVisible = true
    }

  },
  filters: {
    
  }
}
</script>